<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>{php echo !empty($theme['USERCOMPANYNAME'])?$theme['USERCOMPANYNAME']:$_G['companyname'];} 实时投屏</title>
  <link rel="stylesheet" type="text/css" href="{$_G['URL']['DAPING_CSS']}css/reset.css" />
  <link rel="stylesheet" type="text/css" href="{$_G['URL']['DAPING_CSS']}css/index02.css" />


<script src="{$_G['URL']['DAPING_CSS']}js/webappREM.JS"></script>
<script src="{$_G['URL']['DAPING_CSS']}js/jquery-3.3.1.min.js"></script>

</head>
<body>
  <div class="box ui-flex ui-flex-wrap">
    <div class="b_left">
      <div class="t_time">TIME</div>
      <div class="s_time">
        <img src="{$_G['URL']['DAPING_CSS']}images/gg_07.jpg">
      <span id="now_time">20:33:23</span></div>
      <div class="img-responsive">
        <div class="boxp">
          <h3>{$shopname}</h3>
          <div class="s_num" id="count">
            <span>0</span>
            <span>0</span>
            <span>0</span>
            <span>0</span>
          </div>
        </div>
      </div>
      <div class="s_bm">
        <div class="s_title">火速报名中</div>
        <ul id="duiinfo">
        </ul>
      </div>
    </div>
    <div class="b_right">
      <div class="s_title">最新定单</div>
      <div id="new-order-list"></div>
      
      <div class="yixuan">
        {include file='yxworker/w_foot_yixuan'}
      </div>
    </div>

    <div style="display: none;">
        <audio id="haveorder" autoplay>
        </audio>
        <audio id="haveorder1" autoplay>
        </audio>
    </div>

  </div>
</body>
</html>


<script>
  var add_time ;
  $(function(){
    newBlessingBagAjax();
    setInterval(newBlessingBagAjax,2000);
  })

  var endids = 0;

  function newBlessingBagAjax(){
    var url="/{php echo createMobileUrl('w_daping',array("themeid"=>$themeid,"company"=>$company,"op"=>'get'));}";
    $.getJSON(url, function(omg){
          // console.log(omg)
          if(omg.code == 200){
            // 火速报名中
            var dui="";
            for(var i=0;i<omg.dui.length;i++){
              dui+=`<li class="ui-flex">
                <span>【${omg.dui[i].duiname}】</span><h3>成交${omg.dui[i].counts}</h3><span class="ui-flex-1"></span><font>转发</font><h4>${omg.dui[i].forward}</h4><font>浏览</font><h4>${omg.dui[i].scansum}</h4>
              </li>`
            }
            $('#duiinfo').html(dui);

            // 已报名人数
            var countss=omg.cunt.toString();
            $("#count").html(`
                <span>${countss[0]}</span>
                <span>${countss[1]}</span>
                <span>${countss[2]}</span>
                <span>${countss[3]}</span>
            `);

            // 最新定单
            var list ='';
            for (var i = 0; i < omg.data.length; i++) {
              list += `
                <div class="ui-flex item">
                  <span>${omg.data[i].babyname}</span>
                  <span>${omg.data[i].tel}</span>
                  <span>${omg.data[i].datetime}</span>
                  <span>${omg.data[i].wkname}</span>
                </div>
              `;
            }

            $("#new-order-list").html(list);

            // 自动播放定单
            if(endids<omg.data[0].id){
              playordermusic(omg.data[0].babyname,omg.data[0].wkname);
              endids=omg.data[0].id;
            }
          }
        }
    );
  }

  /**
   * 时间戳转时间
   * @param  {[type]} timeStamp 时间戳
   * @return {[type]}           YYYY-mm-dd HH:ii:ss
   */
  function formatDateTime() { 
    var date = new Date()
      var y = date.getFullYear();    
      var m = date.getMonth() + 1;    
      m = m < 10 ? ('0' + m) : m;    
      var d = date.getDate();    
      d = d < 10 ? ('0' + d) : d;    
      var h = date.getHours();  
      h = h < 10 ? ('0' + h) : h;  
      var minute = date.getMinutes();  
      var second = date.getSeconds();  
      minute = minute < 10 ? ('0' + minute) : minute;    
      second = second < 10 ? ('0' + second) : second;   
      // return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;
      return h+':'+minute+':'+second;
  };

  setInterval(function(){
    $('#now_time').html(formatDateTime())
  },1000);

// 语音播报
  function playordermusic(lastordername,lastorderyg){
      var text=lastorderyg+"您的客户"+lastordername+"刚刚下了单，请及时处理！";
      var music1 = "{$_G['URL']['DAPING_CSS']}music/ordermusic.mp3";
      var music2= "{$yxurl}"+encodeURI(encodeURI(text));
      // alert(music2)
      var audio1=$('#haveorder')[0];
      $(audio1).attr('src',music1);
      audio1.play();
      audio1.pause();
      audio1.play();

      audio1.addEventListener("ended", function(){
          var audio2=$('#haveorder1')[0];
          $(audio2).attr('src',music2);
          audio2.play();
          audio2.pause();
          audio2.play();
      });

  }

  // 监听手机微信提示音
  document.addEventListener("WeixinJSBridgeReady", function () {
          document.getElementById('haveorder').play();
          document.getElementById('haveorder1').play();
  }, false);
</script>
